<template>
  <!-- 个人信息 -->
  <view class="personalDetails">
    <u-cell
      :titleStyle="titleStyle"
      title="头像"
      clickable
      :rightIconStyle="rightIconStyle"
    >
      <view slot="value" class="cell-noEmpty avatar-wrapper">
        <image
          class="avatar"
          :src="
            userList.avateor ? userList.avateor : baseImgUrl + 'queryFace.png'
          "
          mode="aspectFill"
        ></image>
      </view>
    </u-cell>
    <u-cell
      :titleStyle="titleStyle"
      title="昵称"
      clickable
      :rightIconStyle="rightIconStyle"
    >
      <view slot="value" class="cell-noEmpty petName">
        {{ userList.realName || "" }}
      </view>
    </u-cell>
    <u-cell
      :titleStyle="titleStyle"
      title="微信绑定手机号"
      clickable
      :rightIconStyle="rightIconStyle"
    >
      <view slot="value" class="cell-noEmpty">
        {{ userList.mobile || "" }}
      </view>
    </u-cell>

    <view class="btns" style="margin-top: calc(100vh - 210px)">
      <button
        class="submit-btn"
        type="primary"
        icon="map"
        style="width: 100%"
        :data-url="'/selfInfo/personPetname/personPetname'"
        @click="handleClickRouter"
      >
        编辑
      </button>
    </view>
  </view>
</template>

<script>
import { handleClickRouter } from "@/utils/util.js";

export default {
  name: "personalDetails",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      userList: {},
    };
  },
  onShow() {
    this.getUserlist();
  },
  methods: {
    handleClickRouter,
    getUserlist() {
      this.userList = uni.getStorageSync("user");
    },
  },
};
</script>

<style lang="scss" scoped>
.personalDetails {
  padding: 0 15rpx;
  .avatar-wrapper {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    overflow: hidden;
    .avatar {
      height: 100%;
      width: 100%;
      border-radius: 50%;
    }
  }

  .petName {
    width: 550rpx;
    text-align: right;
  }
}
</style>
